<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行两列布局</title>
    <style>
        /*
          align-items
          center     所有的子项上下居中
          flex-start 所有子项居上
          flex-end   所有子项居下
          baseline   所有子项居基线上,所有的文字在一条线上(解释不清你自己试试,下面div中必须有文字,并且大小不一样,才能看出效果)
          */
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap; /*超出的元素是否换行*/
            width: 700px;
            height: 150px;
            background-color: lightsteelblue;
            align-items: center;
        }

        .flex-container .flex-item {
            width: 160px;
            height: 80px;
            margin: 10px;
            background-color: lightsalmon;
        }

        .flex-container .one {
            width: 140px;
            height: 90px;

        }

        .flex-container .two {
            width: 120px;
            height: 100px;
        }

        .flex-container .three {
            font-size: 28px;
            width: 300px;
            height: 130px;
        }

    </style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item one">1111</div>
    <div class="flex-item two">2222</div>
    <div class="flex-item three">3333</div>
</div>

<br/>
<a href="https://www.jianshu.com/p/dd127da6e4b8" target="_blank">参考文献2</a>
</body>
</html>